<template>
  <div class="active-basic">
    <div class="common-form">字段信息</div>
    <el-form-item label="字段管理" prop="tableData">
      <el-button icon="Plus" @click="addField">添加字段</el-button>
      <div class="pt16">
        <div class="d-a-c border-t border-l border-r">
          <div style="width: 40px" class="d-c-c border-r">排序</div>
          <div style="min-width: 200px" class="flex-1 d-c-c border-r">名称</div>
          <div style="width: 200px" class="d-c-c border-r">类型</div>
          <div style="min-width: 200px" class="flex-1 d-c-c border-r">
            备选值(以英文逗号隔开)
          </div>
          <div style="width: 40px" class="d-c-c border-r">必填</div>
          <div style="width: 200px" class="d-c-c border-r">验证类型</div>
          <div style="width: 80px" class="d-c-c">操作</div>
        </div>
        <draggable class="wrapper border-b" v-model="form.tableData">
          <template #item="{ element, index }">
            <div class="d-a-c border-t border-l border-r">
              <div
                class="icon iconfont icon-tuodong d-c-c p6 border-r"
                style="width: 40px"
              ></div>
              <div style="min-width: 200px" class="flex-1 p6 border-r d-c-c">
                <el-input type="text" v-model="element.name"></el-input>
              </div>
              <div style="width: 200px" class="d-c-c p6 border-r">
                <el-select v-model="element.type" placeholder="请选择">
                  <el-option
                    v-for="(fitem, findex) in fields"
                    :key="findex"
                    :label="fitem.name"
                    :value="fitem.type"
                  >
                  </el-option>
                </el-select>
              </div>
              <div style="min-width: 200px" class="flex-1 p6 d-c-c border-r">
                <el-input
                  type="text"
                  v-model="element.selectValue"
                  :disabled="
                    element.type != 'radio' &&
                    element.type != 'radio-group' &&
                    element.type != 'select'
                  "
                >
                </el-input>
              </div>
              <div style="width: 40px" class="d-c-c p6 border-r">
                <el-checkbox v-model="element.isRequired"></el-checkbox>
              </div>
              <div style="width: 200px" class="d-c-c p6 border-r">
                <el-select v-model="element.rule" placeholder="请选择">
                  <el-option
                    v-for="(ritem, rindex) in rules"
                    :key="rindex"
                    :label="ritem.name"
                    :value="ritem.type"
                  >
                  </el-option>
                </el-select>
              </div>
              <div style="width: 80px" class="d-c-c p6">
                <el-button
                  type="text"
                  size="small"
                  @click.stop="deleteItem(index)"
                  >删除</el-button
                >
              </div>
            </div>
          </template>
        </draggable>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  props: {
    form: Object,
  },
  data() {
    return {
      fields: [
        {
          name: "单行文本",
          type: "text",
        },
        {
          name: "多行文本",
          type: "textarea",
        },
        {
          name: "单选",
          type: "radio",
        },
        {
          name: "多选",
          type: "radio-group",
        },
        {
          name: "下拉框",
          type: "select",
        },
        {
          name: "图片",
          type: "image",
        },
        {
          name: "地区选择",
          type: "area",
        },
        {
          name: "时间选择",
          type: "time",
        },
      ],
      rules: [
        {
          name: "不验证",
          type: "no",
        },
        {
          name: "数字",
          type: "number",
        },
        {
          name: "手机号码",
          type: "mobile",
        },
        {
          name: "座机或手机号码",
          type: "phone",
        },
        {
          name: "电子邮箱",
          type: "email",
        },
        {
          name: "身份证",
          type: "idcard",
        },
      ],
    };
  },
  methods: {
    addField() {
      this.form.tableData.push({
        name: "",
        type: "text",
        isRequired: true,
        rule: "no",
      });
    },
    deleteItem(index) {
      this.form.tableData.splice(index, 1);
    },
  },
};
</script>

<style>
.mb8 {
  margin-bottom: 8px;
}
.p6 {
  padding: 6px;
}
</style>
